<script>
import AsidePage from "@/components/AsidePage.vue";
import HeadPage from "@/components/HeadPage.vue";

export default {
  name: "IndexPage",
  components: {
    HeadPage,
    AsidePage
  },
  data() {
    return {
      isCollapse: false,
      asidewidth: "200px",
      icon:'el-icon-s-fold',
    };
  },
  methods: {
    doCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asidewidth = this.isCollapse ? "64px" : "200px";
      this.icon=this.isCollapse ? "el-icon-s-unfold":"el-icon-s-fold"
    },
  }
};
</script>

<template>
  <el-container style="height: 100vh; border: 0px solid #ffffff">
    <el-aside :width="asidewidth" style="background-color: rgba(169,169,169,0.3); color: #83f1ff;">
      <AsidePage :isCollapse="isCollapse" @collapse="doCollapse" ></AsidePage>
    </el-aside>
    <el-container style="height: 100%">
      <el-header style="text-align: right; font-size: 12px; border-bottom: rgb(63,63,63) 1px solid;">
        <HeadPage @doCollapse="doCollapse" :icon="icon"/>
      </el-header>
      <el-main style="height: 100%">
        <MainPage />
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-main {
  padding: 5px;
  height: 100%;
}

.el-aside {
  color: #333;
}
</style>
